<template>
  <div class="aiModelSetting-content win-flex-column">
    <div class="top-setting">
      <span class="name mr5">音频输出口</span>
      <el-select clearable filterable placeholder="音频输出口" v-model="pageConfig.outMediaDevice">
        <el-option :key="'outMediaDevice_' + index" v-for="(item, index) in outMediaDeviceList" :label="item.name"
          :value="item.deviceId"></el-option>
      </el-select>
      <el-button class="refreshMediaDeviceBtn" type="primary" @click="getMediaDeviceList(true)">刷新</el-button>
    </div>
    <el-tabs v-model="currTabName">
      <el-tab-pane label="AI生成设置" name="modelSetting">
        <model-setting />
      </el-tab-pane>
      <el-tab-pane label="音频播放设置" name="audioSetting">
        <audio-setting />
      </el-tab-pane>
      <el-tab-pane label="AI设置" name="aiSetting">
        <ai-setting />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { getDeivceInfoList } from '@/api/common/device';
import { EventBus } from '@/event-bus.js';
export default {
  name: 'AiModelSetting',
  components: {
    ModelSetting: resolve => require(['./model-setting.vue'], resolve),
    AudioSetting: resolve => require(['./audio-setting.vue'], resolve),
    AiSetting: resolve => require(['./ai-setting.vue'], resolve),
  },
  data() {
    return {
      currTabName: 'modelSetting',
      outMediaDeviceList: [],
    };
  },
  created() {
    EventBus.$on('jumpToAi', () => {
      this.currTabName = "aiSetting";
    });
    this.getMediaDeviceList(false);
  },
  beforeDestroy() {
    EventBus.$off();
  },
  computed: {
    pageConfig() {
      return this.$store.state.page.config;
    },
    liveAssistant() {
      return this.pageConfig.liveAssistant;
    }
  },
  methods: {
    getMediaDeviceList(showToast = false) {
      getDeivceInfoList().then(res => {
        if (res.result) {
          this.outMediaDeviceList = res.result;
          if (showToast) {
            this.$message({
              message: '刷新设备成功',
              type: 'success'
            });
          }
        }
      });
    },
  }
};
</script>

<style lang="scss" scoped>
.aiModelSetting-content {
  margin: 10px;
  border: 1px solid var(--color-border-first);

  ::v-deep .el-select {
    flex: 1
  }

  .top-setting {
    display: flex;
    flex-direction: row;
    height: 50px;
    border-bottom: 1px solid var(--color-border-second);
    padding: 5px 10px;
    align-items: center;

    .refreshMediaDeviceBtn {
      margin-left: 10px;
    }
  }

  ::v-deep .el-tabs__header {
    margin-bottom: 10px;
  }

  ::v-deep.el-tabs__content {
    padding: 0px 10px;
    padding-bottom: 10px;
  }

  ::v-deep .el-tabs__nav-wrap {
    padding-left: 10px;
  }
}
</style>
